<template>
  <div>
    <van-nav-bar
      title="选择科室"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tree-select
      :items="items"
      :active-id.sync="activeId"
      :main-active-index.sync="activeIndex"
      height="93vh"
    />
  </div>
</template>

<script>
import { departmentApi } from '@/api/department'
export default {
  name: 'departmentApi',
  data () {
    return {
      items: [
        {
          // 导航名称
          text: '',
          children: [
            {
              text: '',
              id: 1
            },
            {
              text: '',
              id: 2
            }
          ]
        }
      ],
      activeId: 1,
      activeIndex: 0
    }
  },
  methods: {
    async getdep () {
      const { data } = await departmentApi()
      console.log(data)
      this.items = data.map((item) => {
        item.child = item.child.map((child) => {
          return {
            id: child.id,
            text: child.name
          }
        })
        return {
          text: item.name,
          children: item.child
        }
      })
    },
    onClickLeft () {
      this.$router.back()
    }
  },
  created () {
    this.getdep()
  }
}
</script>

<style scoped lang='less'>
/deep/ .van-nav-bar__title{
  font-weight: 600;
  font-size: 18px;
}
 /deep/ .van-nav-bar__arrow{
  font-size: 20px;
 }
 /deep/ .van-sidebar-item--select::before{
  background-color: #fff;
 }
/deep/ .van-tree-select__nav-item{
  color: #8b8b8b;
 }
 /deep/ .van-sidebar-item--select{
  color:#42c2a3;
  font-weight: 500;
 }
</style>
